import React, { useContext } from 'react';
import contextObj from './context';
const { Consumer } = contextObj;
const Grandson = () => {
    //  useContext 语法: 可以实现在后代组件中获取祖先组件的数据
    // 语法: const 获取的数据 = useContext(使用createContext创建的对象)
    const contextData = useContext(contextObj);
    // console.log('contextData', contextData);
    return (
        <div>
            朱高炽-仁皇帝
            {/*  方式1: */}
            {/* <Consumer>
                {
                    (val) => (<p>
                        {
                            val.map(item => {
                                return <span key={item.id}>{item.username}</span>
                            })
                        }
                    </p>)
                }
            </Consumer> */}
            {/* 方式2: */}
            <ul>
                {
                    contextData.map(item => <li key={item.id}>{item.username}</li>)
                }
            </ul>
        </div>
    );
}
export default Grandson;
